<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small" style="width:600px;border:1px solid #eee;padding:20px;">
                <el-form-item>
                    <el-select placeholder="选择品牌" v-model="brand" @change="searchClick">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item>
                    <div class="el-button--small el-button el-button el-button--primary" @click="searchClick">
                        <span>查询</span> 
                    </div>
                </el-form-item> -->
                <!-- <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <br>
                <p class="chartTitle">适用卡类<span style="color:#999;font-size:14px;margin-left:10px;">至少勾选一个</span></p>
                <el-form-item>
                    <el-checkbox-group v-model="cardList" :disabled="isDisabled">
                        <el-checkbox label="1">临时卡转会员卡</el-checkbox>
                        <el-checkbox label="2">会员卡转临时卡</el-checkbox><br>
                        <el-checkbox label="3">临时卡转临时卡</el-checkbox>
                        <el-checkbox label="4">会员卡转会员卡</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <br>
                <p class="chartTitle">转币管理</p>
                <el-form-item label="转出卡余币不大于" required>
                    <el-input :disabled="isDisabled" size="small" type="number" min="1" v-model="max_coins" placeholder="请输入币数"
                        style="width:200px;margin-left: 84px;"></el-input><span style="margin-left:10px">币</span> 
                </el-form-item>
                <el-form-item label="转入卡被转入次数不大于" required>
                    <el-input :disabled="isDisabled" size="small" type="number" min="1" v-model="max_coins_time" placeholder="请输入次数"
                        style="width:200px;margin-left: 42px;"></el-input><span style="margin-left:10px">次</span> 
                </el-form-item>
                <p class="chartTitle">转票管理</p>
                <el-form-item label="转出卡每月转出余票总数不大于" required>
                    <el-input :disabled="isDisabled" size="small" type="number" min="1" v-model="max_tickets" placeholder="请输入票数"
                        style="width:200px"></el-input><span style="margin-left:10px">票 / 月</span> 
                </el-form-item>
                <el-form-item label="转入卡被转入次数不大于" required>
                    <el-input :disabled="isDisabled" size="small" type="number" min="1" v-model="max_tickets_time" placeholder="请输入次数"
                        style="width:200px;margin-left: 42px;"></el-input><span style="margin-left:10px">次</span> 
                </el-form-item>
                <br><br>
                <el-form-item style="position:relative;top:0px;left:75%">
                    <el-button v-show="!isChange" :disabled="!isSave" type="primary" @click="saveClick()">保 存</el-button>
                    <el-button v-show="isChange" style="margin-left:0"  type="primary" @click="changeClick">修 改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {
        getData,
        getBrandList,
        save,
    } from "@/api/operation/changeCardManager";
    import { null0to } from '@/utils/validate';
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                storeList: [],
                brandList: [],
                cardList: [],
                completeDialog: false,
                isDisabled: false,
                isChange: false,
                brand: '',
                type:"",
                max_coins: '50',
                max_coins_time: '5',
                max_tickets: '100000',
                max_tickets_time: '5',
                oldData:{},
                formInline: {
                    id: '',
                    brand_id: '',
                    max_coins: '',
                    max_coins_time: '',
                    max_tickets: '',
                    max_tickets_time: '',
                },               
            };
        },
        created() {
            this.getBrand()
        },
        methods: {
            getBrand() {
                getBrandList({ org: 1, category_id: 424 }).then(response => {
                    this.brandList = response;
                    // this.getStore()
                });
            },
            searchClick(){
                this.fetchData();
            },
            changeClick(){
                this.isChange=false;
                this.isDisabled=false;
            },
            // 列表获取
            fetchData() {
                getData({brand_id:this.brand}).then(res=>{
                    this.oldData={
                        brand_id:res.brand_id,  
                        type:res.type,  
                        max_coins:res.max_coins,  
                        max_coins_time:res.max_coins_time,  
                        max_tickets:res.max_tickets,  
                        max_tickets_time:res.max_tickets_time  
                    }
                    // console.log(this.oldData)
                    this.max_coins= '50';
                    this.max_coins_time= '5';
                    this.max_tickets= '100000';
                    this.max_tickets_time= '5';
                    this.cardList=[];
                    if(res.max_coins!=0){
                        this.max_coins=res.max_coins;
                    }
                    if(res.max_coins_time!=0){
                        this.max_coins_time=res.max_coins_time;
                    }
                    if(res.max_tickets!=0){
                        this.max_tickets=res.max_tickets;
                    }
                    if(res.max_tickets_time!=0){
                        this.max_tickets_time=res.max_tickets_time;
                    }
                    if(res.type!=0){
                        this.cardList=res.type.split(",");
                    }
                    this.isChange=true;
                    this.isDisabled=true;  
                    if(res.id==0){
                      this.isChange=false;
                      this.isDisabled=false;
                    }
                    this.formInline.id=res.id;
                })
            },
            // 提交
            saveClick() {
                if(!null0to(this.max_coins)||!null0to(this.max_coins_time)||!null0to(this.max_tickets)||!null0to(this.max_tickets_time)){
                    this.$message.error("请输入正整数");
                    return;
                }
                this.cardList.sort((a,b)=>a-b);
                this.type=this.cardList.join(",");
                if(this.brand==this.oldData.brand_id&&this.max_coins==this.oldData.max_coins&&this.max_coins_time==this.oldData.max_coins_time&&this.max_tickets==this.oldData.max_tickets&&this.max_tickets_time==this.oldData.max_tickets_time&&this.type==this.oldData.type){
                    this.isChange=true;
                    this.isDisabled=true;
                    return;
                }
                this.formInline.brand_id=this.brand;
                this.formInline.max_coins=this.max_coins;
                this.formInline.max_coins_time=this.max_coins_time;
                this.formInline.max_tickets=this.max_tickets;
                this.formInline.max_tickets_time=this.max_tickets_time;
                this.formInline.type=this.type;
                save(this.formInline).then(res=>{
                    // console.log(res)
                    if(res.code==1){
                        this.$message.success(res.message);
                        this.isChange=true;
                        this.isDisabled=true;
                        this.oldData={
                            brand_id:this.brand,  
                            type:this.type,  
                            max_coins:this.max_coins,  
                            max_coins_time:this.max_coins_time,  
                            max_tickets:this.max_tickets,  
                            max_tickets_time:this.max_tickets_time  
                        }
                        this.fetchData();
                    }
                })
            },
        },
        computed:{
            "isSave":function(){
                 if(this.cardList.length==0||!this.max_coins||this.max_coins<=0||!this.max_coins_time||this.max_coins_time<=0||!this.max_tickets||this.max_tickets<=0||!this.max_tickets_time||this.max_tickets_time<=0||!this.brand){
                    return false
                }else{
                    return true;
                }               
            }
        },
        watch:{
        }
    };
</script>

<style lang="scss" scoped>
    div.verify-input{
        display: flex;
        white-space: nowrap;
        align-items: center;
        margin-right: 30px;
        // vertical-align: middle 
    }
</style>
